<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户管理</title>
    <link rel="stylesheet" href="/filetrans/css/style.css">
    <style>
        .user-table {
            width: 100%;
            border-collapse: collapse;
        }

        .user-table th, .user-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .user-table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }

        .user-table tr:hover {
            background-color: #f5f5f5;
        }

        /* Equal width columns */
        .user-table th:nth-child(1),
        .user-table td:nth-child(1) {
            width: 33%;
        }

        .user-table th:nth-child(2),
        .user-table td:nth-child(2) {
            width: 33%;
        }

        .user-table th:nth-child(3),
        .user-table td:nth-child(3) {
            width: 34%;
        }

        .action-buttons {
            display: flex;
            gap: 8px;
        }

        .btn-edit {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn-edit:hover {
            background-color: #2980b9;
        }

        .btn-delete {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn-delete:hover {
            background-color: #c0392b;
        }

        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border-radius: 5px;
            border: 1px solid #888;
            width: 350px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .modal-buttons {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
            gap: 10px;
        }

        .modal-buttons button {
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            border: none;
        }

        .cancel-btn {
            background-color: #f1f1f1;
            color: #333;
        }

        .cancel-btn:hover {
            background-color: #ddd;
        }

        .confirm-btn {
            background-color: #3498db;
            color: white;
        }

        .confirm-btn:hover {
            background-color: #2980b9;
        }

        .modal-content input {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>用户管理</h1>

    <table class="user-table">
        <thead>
        <tr>
            <th>用户名</th>
            <th>角色</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user : ${users}">
            <td th:text="${user.username}"></td>
            <td th:text="${user.roles}"></td>
            <td>
                <div class="action-buttons">
                    <button class="btn-edit"
                            th:data-userid="${user.id}"
                            th:data-username="${user.username}"
                            onclick="showEditModal(this.dataset.userid, this.dataset.username)">
                        <svg width="16" height="12" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             style="margin-right: 5px;">
                            <path d="M12 20h9"/>
                            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/>
                        </svg>编辑
                    </button>
                    <button class="btn-delete"
                            th:data-userid="${user.id}"
                            onclick="deleteUser(this.dataset.userid)">
                        <svg width="16" height="12" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             style="margin-right: 5px;">
                            <polyline points="3 6 5 6 21 6"/>
                            <path d="M19 6l-1 14H6L5 6"/>
                            <path d="M10 11v6"/>
                            <path d="M14 11v6"/>
                            <path d="M9 6V4h6v2"/>
                        </svg> 删除
                    </button>
                </div>
            </td>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!-- Edit User Modal -->
<div id="editModal" class="modal">
    <div class="modal-content">
        <h2>编辑用户</h2>
        <input type="hidden" id="editUserId">
        <div>
            <label for="username">用户名:</label>
            <input disabled type="text" id="username" style="width: 100%; padding: 5px; margin-top: 5px;">
            <label for="newPassword">新密码:</label>
            <input type="text" id="newPassword" style="width: 100%; padding: 5px; margin-top: 5px;">
        </div>
        <div class="modal-buttons">
            <button class="cancel-btn" onclick="closeEditModal()">取消</button>
            <button class="confirm-btn" onclick="updateUsername()">确认</button>
        </div>
    </div>
</div>
<script src="/filetrans/js/md5.min.js"></script>
<script>
    let currentEditingUserId = null;

    function showEditModal(userId, currentUsername) {
        currentEditingUserId = userId;
        document.getElementById('editUserId').value = userId;
        document.getElementById('username').value = currentUsername;
        document.getElementById('editModal').style.display = 'block';
    }

    function closeEditModal() {
        document.getElementById('editModal').style.display = 'none';
        currentEditingUserId = null;
    }

    function updateUsername() {
        const newPassword = document.getElementById('newPassword').value;

        if (newPassword.length !== newPassword.trim().length) {
            alert('密码不能包含空格');
            return;
        }

        if (!newPassword || newPassword.length < 6) {
            alert('密码不能为空且大于6位');
            return;
        }

        fetch(`/filetrans/admin/users/update`, {
            method: 'POST',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                id: currentEditingUserId,
                password: md5(newPassword)
            })
        }).then(response => {
            if (response.ok) {
                location.reload();
            } else {
                alert('更新用户名失败');
            }
        }).catch(error => {
            console.error('Error:', error);
            alert('更新用户名时出错');
        });
    }

    function deleteUser(userId) {
        if (confirm('确定要删除这个用户吗？')) {
            fetch(`/filetrans/admin/users/${userId}`, {
                method: 'DELETE',
                credentials: 'include'
            }).then(response => {
                if (response.ok) location.reload();
            });
        }
    }

    // Close modal when clicking outside of it
    window.onclick = function (event) {
        const modal = document.getElementById('editModal');
        if (event.target === modal) {
            closeEditModal();
        }
    }
</script>
</body>
</html>